<template>
	<view class="zone">
		<Header title="市场"></Header>
		<view class="main">
			<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
			<!-- 出售中 求购中 -->
			<view class="fixed">
				<view class="jilu" @click="$p.navto('/pages/index/marketList')">
					记录
				</view>
				<view class="toptab">
					<view class="tb_item" v-for="(item, index) in tablist1" :class="[stat1 == item.id?'active':'']"
						:key="index" @click="tabtz(item)">
						{{item.name}}
					</view>
				</view>
			</view>

			<!-- 丹药 装备 法器 道侣 阵法 -->
			<view class="tabs">
				<view :class="['tab',stat2==item.id?'act':'']" v-for="(item,index) in tablist2" :key="index"
					@click="tabchange(item.id,index)">
					{{item.name}}
				</view>
			</view>

			<!-- 滑动选择数据 -->
			<scroll-view scroll-x class="scrolltop">
				<view class="t_list">
					<view :class="['item',stat3 == item.type?'c_active':'']" v-for="(item, index) in shaiList[stat2]"
						:key="index" @click="thingtab(item.type)">
						{{item.name}}
					</view>
				</view>
			</scroll-view>

			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
			<view class="boxinfo">

				<!-- 列表数据 -->
				<scroll-view scroll-y class="scrolllist" @scrolltolower="scrolltolowerlist()">
					<view class="list" v-if="stat1 == 1">
						<view class="item" v-for="(item , index) in buydatalist" :key="index">
							<view class="imgbox" v-if="item.props">
								<image :src="item.props.img" mode="widthFix" />
							</view>
							<view class="imgbox" v-if="item.kits">
								<image :src="item.kits.img" mode="widthFix" />
								<view class="jingjie">
									{{item.level.grade_name}}
								</view>
							</view>
							<view class="imgbox" v-if="item.faqi">
								<image :src="item.faqi.img" mode="widthFix" />
								<view class="jingjie">
									{{item.level.grade_name}}
								</view>
							</view>

							<view class="word">

								<view class="wp1" v-if="item.props">{{item.props.name}}</view>
								<view class="wp1" v-if="item.kits">{{item.kits.name}}</view>
								<view class="wp1" v-if="item.faqi">{{item.faqi.name}}</view>

								<view class="wp2">数量:{{item.num}}</view>
							</view>


							<view class="danjia">
								<p>求购单价:<text>{{( Number(item.price)).toFixed(2)}}</text> 灵石/个</p>
							</view>
							<view class="button" @click="tosell(item)">出售</view>
						</view>

						<view v-if="buydatalist.length==0" class="empty">
							<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" class="zaneu_img"
								mode="widthFix">
							</image>
							<text>没有数据哦~</text>
						</view>
						<u-loadmore v-else :status="status" color="rgba(255,255,255,0.7)" :icon-type="iconType"
							:load-text="loadText" />
					</view>

					<view class="list" v-if="stat1 == 2">
						<view class="item" v-for="(item , index) in selldatalist" :key="index">
							<view class="imgbox" v-if="item.props">
								<image :src="item.props.img" mode="widthFix" />
							</view>
							<view class="imgbox" v-if="item.kits">
								<image :src="item.kits.img" mode="widthFix" />
								<view class="jingjie">
									{{item.level.grade_name}}
								</view>
							</view>
							<view class="imgbox" v-if="item.faqi">
								<image :src="item.faqi.img" mode="widthFix" />
								<view class="jingjie">
									{{item.level.grade_name}}
								</view>
							</view>

							<view class="word">

								<view class="wp1" v-if="item.props">{{item.props.name}}</view>
								<view class="wp1" v-if="item.kits">{{item.kits.name}}</view>
								<view class="wp1" v-if="item.faqi">{{item.faqi.name}}</view>

								<view class="wp2">数量:{{item.num}}</view>
							</view>
							<view class="danjia">
								<p>出售单价:<text>{{(Number(item.price)).toFixed(2)}}</text> 灵石/个</p>
							</view>
							<view class="button" @click="tobuy(item)">购买</view>
						</view>

						<view v-if="selldatalist.length==0" class="empty">
							<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" class="zaneu_img"
								mode="widthFix">
							</image>
							<text>没有数据哦~</text>
						</view>
						<u-loadmore v-else :status="status" color="rgba(255,255,255,0.7)" :icon-type="iconType"
							:load-text="loadText" />
					</view>
				</scroll-view>

				<view class="fachubtn" v-if="stat1==1" @click="$p.navto('/pages/index/my_want')">
					我的求购
				</view>
				<view class="fachubtn" v-if="stat1==2" @click="$p.navto('/pages/index/my_sell')">
					我的出售
				</view>
			</view>
		</view>

		<!-- 出售 -->
		<u-mask :show="buy">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="jihuop">
							<view class="wupo">
								<view class="wuimg">
									<image class="sjjsj" :src="tanImg" mode="widthFix"></image>
									<view class="jingjie">
										{{tanLevel}}
									</view>
								</view>
								<view class="wubox">
									<view class="wuname">
										{{tanName}}
									</view>
									<view class="wunum">
										求购数量:<text class="color">{{tanNum}}</text>
									</view>
								</view>
							</view>
							<image class="ghang" src="http://image.qxgm.site/tdz/img/liandan/mg-13.png" mode="widthFix">
							</image>
							<view class="dangqian">
								求购单价:<text class="col">{{tanPrice}}灵石/个</text>
							</view>
							<view class="bujingqi">
								<Number :positiveInteger='false' placeholder='请输入出售数量' v-model="buyvalue" size="25px"
									:min="1" :max="10000" :input-width="300" color="#fff">
								</Number>
							</view>

							<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
								class="refineCon" @click="confirmChu">确认出售</u-button>
							<view class="chsab">
								拥有数量：{{tanHave}}
							</view>


						</view>

					</view>
				</view>
				<image class="m_close" @click="buy = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>


		<!-- 购买 -->
		<u-mask :show="sale">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="jihuop">
							<view class="wupo">
								<image class="wuimg" :src="tanImg" mode="widthFix"></image>
								<view class="wubox">
									<view class="wuname">
										{{tanName}}
									</view>
									<view class="wunum">
										出售数量:<text class="color">{{tanNum}}</text>
									</view>
								</view>
							</view>
							<image class="ghang" src="http://image.qxgm.site/tdz/img/liandan/mg-13.png" mode="widthFix">
							</image>
							<view class="dangqian">
								出售单价:<text class="col">{{tanPrice}}灵石/个</text>
							</view>
							<view class="bujingqi">
								<Number :positiveInteger='false' placeholder='请输入购买数量' v-model="salevalue" size="25px"
									:min="1" :max="10000" :input-width="300" color="#fff">
								</Number>
							</view>

							<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
								class="refineCon" @click="confirmMai">确认购买</u-button>
							<view class="chsab">
								拥有灵石:{{lingshi}}
							</view>

						</view>

					</view>
				</view>
				<image class="m_close" @click="sale = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stat1: 2,
				stat2: 1,
				stat3: 0, //滑动列表选中
				buy: false, //出售   我卖给别人
				buyvalue: 1,
				sale: false, //购买  别人卖给我
				salevalue: 1,
				tablist1: [{
						id: 1,
						img: 'tab2.png',
						name: '求购中',
					},
					{
						id: 2,
						img: 'tab1.png',
						name: '出售中',
					},

				], // 最上方切换
				tablist2: [],
				tablist3: [],
				shaiList: {
					1: [],
					2: [],
					3: [],
					4: [],
					5: [],
				}, // 筛选实物列表
				selldatalist: [], // 出售列表
				buydatalist: [], // 求购列表
				page: 1,
				max_page: 1,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '上拉加载',
					loading: '努力加载中',
					nomore: '没有更多了'
				},

				// 别人求购我出售
				tanImg: '',
				tanName: '',
				tanLevel: '',
				tanNum: '',
				tanPrice: '',
				tanHave: '',
				tanID: '',

				lingshi: 0,
			}
		},
		onLoad() {
			this.getList()
			this.sellList()
			this.getUserInfo();
		},
		onShow() {

		},
		methods: {
			// 获取个人信息
			async getUserInfo() {
				let res = await this.$http.index.getUserInfo()
				if (res.code == 1) {
					this.lingshi = res.data.lingshi
				}
			},
			// 出售中/求购中 切换
			tabtz(item) {
				if (this.stat1 == item.id) return;
				this.stat1 = item.id
				if (item.id == 1) {
					this.empty();
					this.buyList()
				} else if (item.id == 2) {
					this.empty2();
					this.sellList()
				}
				this.status = 'loadmore'
			},
			// 请求 丹药 装备 法器 道侣 阵法 列表
			async getList() {
				let res = await this.$http.index.marketCate()
				if (res.code == 1) {
					for (let i = 0; i < res.data.length; i++) {
						this.tablist2 = res.data
						this.tradeList(this.stat2, 0)
					}
				}
			},
			// 丹药 装备 法器 道侣 阵法
			tabchange(id, index) {
				if (this.stat2 == id) return;
				this.stat3 = 0 // 切换默认选择全部，
				this.stat2 = id;
				this.tradeList(this.stat2, 0)
				if (this.stat1 == 1) {
					this.buyList()
					this.empty();
				} else if (this.stat1 == 2) {
					this.empty2();
					this.sellList();
				}
			},
			// 请求道具列表
			async tradeList(type, index) {
				this.shaiList[type] = [{
					name: '全部',
					type: 0
				}]
				this.shaiList[type] = [...this.shaiList[type], ...this.tablist2[this.stat2 - 1].cate]
			},

			// 滑动选择数据 实物部分tab切换
			async thingtab(id) {
				if (this.stat3 == id) return;
				this.stat3 = id
				console.log(this.stat1, this.stat2, this.stat3);
				this.tradeList();
				if (this.stat1 == 1) {
					await this.empty();
					// 求购
					this.buyList()

				} else if (this.stat1 == 2) {
					await this.empty2();
					// 出售
					this.sellList();
				}
			},

			// 求购列表
			async buyList() {
				let res = await this.$http.index.marketIndex({
					deal_type: this.stat1,
					cate: this.stat2,
					type: this.stat3,
					page: this.page
				})
				if (res.code == 1) {
					this.buydatalist = [...this.buydatalist, ...res.data.data];
					this.max_page = res.data.last_page;
					if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
				}
			},

			// 出售列表
			async sellList() {
				let res = await this.$http.index.marketIndex({
					deal_type: this.stat1,
					cate: this.stat2,
					type: this.stat3,
					page: this.page
				})
				if (res.code == 1) {
					this.selldatalist = [...this.selldatalist, ...res.data.data];
					this.max_page = res.data.last_page;
					console.log(this.page, this.max_page);
					if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
				}
			},

			// 加载更多
			scrolltolowerlist() {
				console.log(this.page, this.max_page);
				if (this.page >= this.max_page) {
					this.status = 'nomore'
					return;
				}
				this.status = 'loading';
				this.page = ++this.page;
				if (this.stat1 == 2) {
					this.sellList(this.shaiList[this.stat2][this.stat3].id, this.stat2)
				} else {
					this.buyList(this.shaiList[this.stat2][this.stat3].id, this.stat2)
				}
			},

			// 重置求购中列表，
			empty() {
				this.buydatalist = [];
				this.page = 1;
			},

			// 重置出售中列表，
			empty2() {
				this.selldatalist = [];
				this.page = 1;
			},
			// 出售
			tosell(item) {
				console.log(item);
				this.tanID = item.id
				this.tanImg = item.props ? item.props.img : item.kits ? item.kits.img : item.faqi.img
				this.tanName = item.props ? item.props.name : item.kits ? item.kits.name : item.faqi.name
				this.tanLevel = item.level ? item.level.grade_name : ''
				this.tanNum = item.num
				this.tanPrice = item.price
				this.tanHave = item.props ? item.props.backpack_num : item.kits ? item.kits.backpack_num : item.faqi
					.backpack_num
				this.buy = true
			},
			// 购买
			tobuy(item) {
				this.tanID = item.id
				this.tanImg = item.props ? item.props.img : item.kits ? item.kits.img : item.faqi.img
				this.tanName = item.props ? item.props.name : item.kits ? item.kits.name : item.faqi.name
				this.tanLevel = item.level ? item.level.grade_name : ''
				this.tanNum = item.num
				this.tanPrice = item.price
				this.sale = true
			},
			// 确认出售
			async confirmChu() {
				if (this.buyvalue == '' || this.buyvalue == null) {
					this.$u.toast('请输入出售数量')
					return
				}
				let res = await this.$http.index.marketSell({
					order_id: this.tanID,
					num: this.buyvalue,
				})
				if (res.code == 1) {
					this.empty();
					this.buyList()
					this.buy = false;
				}
				this.$u.toast(res.msg)
			},
			// 确认购买
			async confirmMai() {
				if (this.salevalue == '' || this.salevalue == null) {
					this.$u.toast('请输入购买数量')
					return
				}
				let res = await this.$http.index.marketBuy({
					order_id: this.tanID,
					num: this.salevalue,
				})
				if (res.code == 1) {
					this.empty2();
					this.sellList();
					this.getUserInfo();
					this.sale = false;
				}
				this.$u.toast(res.msg)
			},
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.main {
		width: 100%;
		position: relative;
	}

	.fixed {
		position: absolute;
		top: -70px;
		right: 6px;
		display: flex;
		align-items: flex-end;
		z-index: 999;

		.jilu {
			width: 56px;
			text-align: center;
			height: 25px;
			font-size: 13px;
			color: #fef7c8;
			text-shadow: 0 1px 1px #CB6500;
			line-height: 25px;
			font-weight: normal;
			background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
			background-size: 100% 100%;
			margin-right: 7px;
			margin-bottom: 5px;
		}

		.toptab {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.active {
			color: #333333 !important;
			background: url(http://image.qxgm.site/tdz/img/market/mg-01.png) no-repeat !important;
			background-size: 100% 100% !important;
		}

		.tb_item {
			word-wrap: break-word;
			/*英文的时候需要加上这句，自动换行*/
			/*自测了这句话没啥用*/
			writing-mode: vertical-rl;
			/*从左向右 从右向左是 writing-mode: vertical-rl;*/
			writing-mode: tb-rl;
			/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
			text-align: center;
			padding: 0px;
			display: flex;
			-webkit-display: flex;
			flex-direction: column;
			justify-content: center;
			background: url(http://image.qxgm.site/tdz/img/market/mg-02.png) no-repeat;
			background-size: 100% 100%;
			width: 37px;
			height: 96px;
			font-size: 16px;
			color: #666666;
			font-weight: normal;
		}


	}

	.yun {
		width: 44%;
	}

	.tabs {
		width: 100%;
		padding: 8px 9px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/team/mg-06.png) no-repeat;
		background-size: 100% 100%;

		.tab {
			width: 19%;
			background: url(http://image.qxgm.site/tdz/img/daolv/smg-05.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			color: #FFFED0;
			line-height: 27px;
			margin-right: 5px;
		}

		.act {
			color: #A97D45;
			background: url(http://image.qxgm.site/tdz/img/daolv/smg-04.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	// 滑动选择数据

	.scrolltop {
		width: calc(100% - 18px);
		padding: 0 9px;
		white-space: nowrap;
		margin-top: 4px;

		.t_list {
			display: flex;
			align-items: center;

			.c_active {
				background: url(http://image.qxgm.site/tdz/img/market/mg-05.png) no-repeat !important;
				background-size: 100% 100% !important;
			}

			.item {
				width: 70px;
				font-size: 13px;
				color: #A56E47;
				padding: 8px 0 12px;
				font-weight: normal;
				line-height: 13px;
				text-align: center;
				margin-right: 6px;
				background: url(http://image.qxgm.site/tdz/img/market/mg-04.png) no-repeat;
				background-size: 100% 100%;
			}

		}
	}

	.ping1 {
		width: 100%;
		display: flex;
	}

	.boxinfo {
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		padding: 0 6px 0px;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: url(http://image.qxgm.site/tdz/img/market/mg-07.png) no-repeat;
			background-size: 100% 100%;
			padding: 8px 16px 8px 8px;
			box-sizing: border-box;
		}

		.imgbox {
			position: relative;
			width: 60px;
			background: url(http://image.qxgm.site/tdz/img/liandan/tanbg.png) no-repeat;
			background-size: 100% 100%;
			padding: 2px 4px;
			box-sizing: border-box;

			image {
				width: 100%;
			}

			.jingjie {
				position: absolute;
				right: 3px;
				bottom: 3px;
				font-size: 12px;
				color: #fff;
			}
		}

		.word {
			flex: 1;
			margin-left: 7px;

			.wp1 {
				font-size: 16px;
				font-weight: normal;
				color: #333333;
				line-height: 18px;
				margin-bottom: 7px;
			}

			.wp2 {
				font-size: 14px;
				font-weight: normal;
				color: #333333;
				line-height: 15px;
			}
		}

		.danjia {
			flex: 1;
			font-size: 12px;
			font-weight: normal;
			color: #333333;
			line-height: 16px;

			text {
				color: #FF0707;
			}
		}

		.button {
			width: 63px;
			height: 37px;
			text-align: center;
			font-size: 16px;
			color: #fef7c8;
			text-shadow: 0 1px 1px #CB6500;
			line-height: 37px;
			font-weight: normal;
			background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.scrolllist {
		height: calc(100vh - 270px);
		overflow-y: scroll;
	}

	.fachubtn {
		display: block;
		margin: 18px auto;
		width: 116px;
		height: 37px;
		text-align: center;
		font-size: 16px;
		color: #fef7c8;
		text-shadow: 0 1px 1px #CB6500;
		line-height: 37px;
		font-weight: normal;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}


	.jihuop {
		padding: 0 10%;

		.wupo {
			display: flex;
			align-items: center;

			.wuimg {
				position: relative;
				width: 70px;
				padding: 6px 4px;
				box-sizing: border-box;
				background: url(http://image.qxgm.site/tdz/img/liandan/tanbg.png) no-repeat;
				background-size: 100% 100%;

				.sjjsj {
					width: 100%;
				}

				.jingjie {
					position: absolute;
					right: 3px;
					bottom: 3px;
					font-size: 12px;
					color: #fff;
				}
			}
		}

		.wubox {
			flex: 1;
			margin-left: 7px;
		}

		.wuname {
			font-weight: normal;
			font-size: 18px;
			color: #333333;
			line-height: 18px;
			margin-bottom: 20px;
		}

		.wunum {
			font-weight: normal;
			font-size: 15px;
			color: #333333;
			line-height: 15px;
		}

		.color {
			color: #FF3333;
		}

		.ghang {
			width: 100%;
			margin: 10px 0;
		}

		.wujieshao {
			font-weight: normal;
			font-size: 15px;
			color: #333333;
			line-height: 19px;
		}

		.refineCon {
			display: block;
			margin: 0px auto 0;
			width: 116px;
			font-size: 18px;
			height: 37px;
			font-weight: normal;
			color: #f9e5b6;
			line-height: 37px;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
			background-size: 100% 100%;
		}

		.bujingqi {
			text-align: center;
			margin: 15px auto;
		}

		.dangqian {
			font-size: 15px;
			font-weight: normal;
			color: #333333;
			line-height: 15px;
			text-align: center;
			margin-bottom: 3vh;
		}

		.chsab {
			font-size: 13px;
			font-weight: normal;
			color: #333333;
			line-height: 13px;
			text-align: center;
			margin-top: 12px;
		}

		.ghang {
			width: 100%;
			margin: 10px 0;
		}
	}
</style>